<!-- Site Setting Panel -->
<section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<div class="pageheader">
  <h2><i class="fa fa-css3"></i> Buttons </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> Buttons </li>
    </ol>
  </div>
</div>
<div class="page">

  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Default Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <button class="btn btn-default btn-sm" type="button">Default</button>
          <button class="btn btn-primary btn-sm" type="button">Primary</button>
          <button class="btn btn-info btn-sm" type="button">Info</button>
          <button class="btn btn-success btn-sm" type="button">Success</button>
          <button class="btn btn-warning btn-sm" type="button">Warning</button>
          <button class="btn btn-danger btn-sm" type="button">Danger</button>
          <button class="btn btn-purple btn-sm" type="button">Danger</button>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Link Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <a href="javascript:void(0)" class="btn btn-default btn-sm"> Default </a> 
          <a href="javascript:void(0)" class="btn btn-primary btn-sm"> Primary </a> 
          <a href="javascript:void(0)" class="btn btn-info btn-sm"> Info </a> 
          <a href="javascript:void(0)" class="btn btn-success btn-sm"> Success </a> 
          <a href="javascript:void(0)" class="btn btn-warning btn-sm"> Warning </a> 
          <a href="javascript:void(0)" class="btn btn-danger btn-sm"> Danger </a> 
          <a href="javascript:void(0)" class="btn btn-purple btn-sm"> Danger </a>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Input Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <input type="button" class="btn btn-default btn-sm" value="Default">
          <input type="button" class="btn btn-primary btn-sm" value="Primary">
          <input type="button" class="btn btn-info btn-sm" value="Info">
          <input type="button" class="btn btn-success btn-sm" value="Success">
          <input type="button" class="btn btn-warning btn-sm" value="Warning">
          <input type="button" class="btn btn-danger btn-sm" value="Danger">
          <input type="button" class="btn btn-purple btn-sm" value="Danger">
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Submit Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <input type="submit" class="btn btn-default btn-sm" value="Default">
          <input type="submit" class="btn btn-primary btn-sm" value="Primary">
          <input type="submit" class="btn btn-info btn-sm" value="Info">
          <input type="submit" class="btn btn-success btn-sm" value="Success">
          <input type="submit" class="btn btn-warning btn-sm" value="Warning">
          <input type="submit" class="btn btn-danger btn-sm" value="Danger">
          <input type="submit" class="btn btn-purple btn-sm" value="Danger">
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Circle Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Add <code>.btn-circle</code> to use circle buttons.</p>
          <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-th-list"></i></button>
          <button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i></button>
          <button type="button" class="btn btn-info btn-circle"><i class="fa fa-arrows-alt"></i></button>
          <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-power-off"></i></button>
          <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-heart"></i></button>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Outline Circle Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Add <code>.btn-circle </code> and <code> .btn-outline </code> to use outline circle buttons.</p>
          <button type="button" class="btn btn-default btn-circle btn-outline"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-primary btn-circle btn-outline"><i class="fa fa-th-list"></i></button>
          <button type="button" class="btn btn-success btn-circle btn-outline"><i class="fa fa-link"></i></button>
          <button type="button" class="btn btn-info btn-circle btn-outline"><i class="fa fa-arrows-alt"></i></button>
          <button type="button" class="btn btn-warning btn-circle btn-outline"><i class="fa fa-power-off"></i></button>
          <button type="button" class="btn btn-danger btn-circle btn-outline"><i class="fa fa-heart"></i></button>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Outline Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Add <code>.btn-outline</code> to use outline buttons.</p>
          <button class="btn btn-default btn-sm btn-outline" type="button">Default</button>
          <button class="btn btn-primary btn-sm btn-outline" type="button">Primary</button>
          <button class="btn btn-success btn-sm btn-outline" type="button">Success</button>
          <button class="btn btn-info btn-sm btn-outline" type="button">Info</button>
          <button class="btn btn-warning btn-sm btn-outline" type="button">Warning</button>
          <button class="btn btn-danger btn-sm btn-outline" type="button">Danger</button>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Outline icon Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Add <code>.btn-outline</code> to use outline buttons.</p>
          <button class="btn btn-default btn-sm btn-outline" type="button"> <i class="fa fa-thumbs-up"></i> Default</button>
          <button class="btn btn-primary btn-sm btn-outline" type="button"> <i class="fa fa-thumbs-up"></i> Primary</button>
          <button class="btn btn-success btn-sm btn-outline" type="button"> <i class="fa fa-thumbs-up"></i> Success</button>
          <button class="btn btn-info btn-sm btn-outline" type="button"> <i class="fa fa-thumbs-up"></i> Info</button>
          <button class="btn btn-warning btn-sm btn-outline" type="button"> <i class="fa fa-thumbs-up"></i> Warning</button>
          <button class="btn btn-danger btn-sm btn-outline" type="button"> <i class="fa fa-thumbs-up"></i> Danger</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Button Width </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>
            <button type="button" class="btn btn-primary btn-cxs">xs</button>
            <button type="button" class="btn btn-primary btn-csm">small</button>
            <button type="button" class="btn btn-primary btn-cmd">middle</button>
            <button type="button" class="btn btn-primary btn-clg">large</button>
          </p>
          <div class="divider"></div>
          <p>
            <button type="button" class="btn btn-default btn-cxs">xs</button>
            <button type="button" class="btn btn-default btn-csm">small</button>
            <button type="button" class="btn btn-default btn-cmd">middle</button>
            <button type="button" class="btn btn-default btn-clg">large</button>
          </p>
          <div class="divider"></div>
          <p>
            <button type="button" class="btn btn-success btn-cxs">xs</button>
            <button type="button" class="btn btn-warning btn-csm">small</button>
            <button type="button" class="btn btn-danger btn-cmd">middle</button>
            <button type="button" class="btn btn-info btn-clg">large</button>
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Full Width Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <div class="col-md-12">Add <code>.btn-block</code> to use block button</div>
            </div>
            <div class="form-group">
              <div class="col-md-12">
                <button class="btn btn-default btn-block">Default</button>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-6">
                <button class="btn btn-primary btn-block">Primary</button>
              </div>
              <div class="col-md-6">
                <button class="btn btn-info btn-block">Info</button>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-4">
                <button class="btn btn-success btn-block">Success</button>
              </div>
              <div class="col-md-4">
                <button class="btn btn-warning btn-block">Warning</button>
              </div>
              <div class="col-md-4">
                <button class="btn btn-danger btn-block">Danger</button>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-3">
                <button class="btn btn-success btn-block">Success</button>
              </div>
              <div class="col-md-3">
                <button class="btn btn-warning btn-block">Warning</button>
              </div>
              <div class="col-md-3">
                <button class="btn btn-info btn-block">Danger</button>
              </div>
              <div class="col-md-3">
                <button class="btn btn-danger btn-block">Danger</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Button Groups </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
          <div class="btn-group">
            <button type="button" class="btn btn-warning">Left</button>
            <button type="button" class="btn btn-warning">Middle</button>
            <button type="button" class="btn btn-warning">Right</button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-danger">Left</button>
            <button type="button" class="btn btn-danger">Middle</button>
            <button type="button" class="btn btn-danger">Right</button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-success">Left</button>
            <button type="button" class="btn btn-success">Middle</button>
            <button type="button" class="btn btn-success">Right</button>
          </div>
          <br>
          <br>
          <div class="btn-group">
            <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button>
            <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button>
            <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button>
            <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button>
            <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
            <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
            <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
            <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button>
            <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Disabled Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
          <button class="btn btn-default disabled">Default</button>
          <button class="btn btn-primary disabled">Primary</button>
          <button class="btn btn-info disabled">Info</button>
          <button class="btn btn-success disabled">Sucess</button>
          <button class="btn btn-warning disabled">Warning</button>
          <button class="btn btn-danger disabled">Danger</button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Button Groups Toolbar & Dropdown </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
          <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
              <button class="btn btn-default" type="button">1</button>
              <button class="btn btn-default" type="button">2</button>
              <button class="btn btn-default" type="button">3</button>
              <button class="btn btn-default" type="button">4</button>
              <button class="btn btn-default" type="button">5</button>
              <button class="btn btn-default" type="button">6</button>
              <button class="btn btn-default" type="button">7</button>
            </div>
            <div class="btn-group">
              <button class="btn btn-default" type="button">8</button>
              <button class="btn btn-default" type="button">9</button>
            </div>
          </div>
          <h4>Nesting</h4>
          <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
          <div class="btn-group">
            <button type="button" class="btn btn-warning">1</button>
            <button type="button" class="btn btn-warning">2</button>
            <div class="btn-group" dropdown is-open="status.isopen8">
              <button type="button" class="btn btn-warning dropdown-toggle" dropdown-toggle> Dropdown <span class="caret"></span> </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:;">Dropdown link</a></li>
                <li><a href="javascript:;">Dropdown link</a></li>
              </ul>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-success">1</button>
            <button type="button" class="btn btn-success">2</button>
            <div class="btn-group" dropdown is-open="status.isopen9">
              <button type="button" class="btn btn-success dropdown-toggle" dropdown-toggle> Dropdown <span class="caret"></span> </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:;">Dropdown link</a></li>
                <li><a href="javascript:;">Dropdown link</a></li>
              </ul>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-danger">1</button>
            <button type="button" class="btn btn-danger">2</button>
            <div class="btn-group" dropdown is-open="status.isopen10">
              <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> Dropdown <span class="caret"></span> </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:;">Dropdown link</a></li>
                <li><a href="javascript:;">Dropdown link</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Button Groups Width </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
          <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-lg">
              <button type="button" class="btn btn-warning">Left</button>
              <button type="button" class="btn btn-warning">Middle</button>
              <button type="button" class="btn btn-warning">Right</button>
            </div>
          </div>
          <p role="toolbar" class="btn-toolbar"> </p>
          <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
              <button type="button" class="btn btn-success">Left</button>
              <button type="button" class="btn btn-success">Middle</button>
              <button type="button" class="btn btn-success">Right</button>
            </div>
          </div>
          <p role="toolbar" class="btn-toolbar"> </p>
          <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-danger">Left</button>
              <button type="button" class="btn btn-danger">Middle</button>
              <button type="button" class="btn btn-danger">Right</button>
            </div>
          </div>
          <p role="toolbar" class="btn-toolbar"> </p>
          <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-xs">
              <button type="button" class="btn btn-info">Left</button>
              <button type="button" class="btn btn-info">Middle</button>
              <button type="button" class="btn btn-info">Right</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Single Button Dropdown </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
          <div class="btn-group" dropdown is-open="status.isopen1">
            <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle> Action <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen2">
            <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> Action <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen3">
            <button type="button" class="btn btn-success dropdown-toggle" dropdown-toggle> Action <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen4">
            <button type="button" class="btn btn-info dropdown-toggle" dropdown-toggle> Action <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen5">
            <button type="button" class="btn btn-warning dropdown-toggle" dropdown-toggle> Action <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen6">
            <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> Action <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Split Button Dropdown </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
          <div class="btn-group" dropdown is-open="status.isopen18">
            <button class="btn btn-default btn-sm" type="button">Action</button>
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen19">
            <button class="btn btn-primary btn-sm" type="button">Action</button>
            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen20">
            <button class="btn btn-success btn-sm" type="button">Action</button>
            <button class="btn btn-success btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen21">
            <button class="btn btn-info btn-sm" type="button">Action</button>
            <button class="btn btn-info btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen22">
            <button class="btn btn-warning btn-sm" type="button">Action</button>
            <button class="btn btn-warning btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group" dropdown is-open="status.isopen23">
            <button class="btn btn-danger btn-sm" type="button">Action</button>
            <button class="btn btn-danger btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Button Dropup </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <div class="btn-group dropup" dropdown is-open="status.isopen11">
            <button type="button" class="btn btn-default">Action</button>
            <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen12">
            <button type="button" class="btn btn-primary">Action</button>
            <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen13">
            <button type="button" class="btn btn-success">Action</button>
            <button type="button" class="btn btn-success dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen14">
            <button type="button" class="btn btn-warning">Action</button>
            <button type="button" class="btn btn-warning dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen15">
            <button type="button" class="btn btn-danger">Action</button>
            <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Split Button Dropup </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <div class="btn-group dropup" dropdown is-open="status.isopen25">
            <button class="btn btn-default btn-sm" type="button">Action</button>
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen26">
            <button class="btn btn-primary btn-sm" type="button">Action</button>
            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen27">
            <button class="btn btn-success btn-sm" type="button">Action</button>
            <button class="btn btn-success btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen28">
            <button class="btn btn-info btn-sm" type="button">Action</button>
            <button class="btn btn-info btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen29">
            <button class="btn btn-warning btn-sm" type="button">Action</button>
            <button class="btn btn-warning btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group dropup" dropdown is-open="status.isopen30">
            <button class="btn btn-danger btn-sm" type="button">Action</button>
            <button class="btn btn-danger btn-sm dropdown-toggle" type="button" dropdown-toggle> <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="javascript:;">Action</a></li>
              <li><a href="javascript:;">Another action</a></li>
              <li><a href="javascript:;">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="javascript:;">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Button with Icon </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <button class="btn btn-primary"><span class="fa fa-cloud"></span> Cloud</button>
          <button class="btn btn-success"><span class="fa fa-eye"></span> View </button>
          <button class="btn btn-info"><span class="fa fa-refresh"></span> Update</button>
          <button class="btn btn-default"><span class="fa fa-cloud-download"></span> Upload</button>
          <button class="btn btn-danger"><span class="fa fa-power-off"></span> Off</button>
          <button class="btn btn-warning"><span class="fa fa-thumbs-up"></span> 89</button>
          <div class="divider"></div>
          <div class="divider"></div>
          <a href="javascript:;" class="btn btn-default btn-twitter"><i class="fa fa-twitter"></i> Twitter</a> 
          <a href="javascript:;" class="btn btn-default btn-facebook"><i class="fa fa-facebook"></i> Facebook</a> 
          <a href="javascript:;" class="btn btn-default btn-gplus"><i class="fa fa-google-plus"></i> Google+</a> 
          <a href="javascript:;" class="btn btn-default btn-skype"><i class="fa fa-skype"></i> skype</a> 
          <a href="javascript:;" class="btn btn-default btn-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
          <div class="divider"></div>
          <div class="divider"></div>
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-twitter"><i class="fa fa-twitter"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-facebook"><i class="fa fa-facebook"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-google-plus"><i class="fa fa-google-plus"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-instagram"><i class="fa fa-instagram"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-pinterest"><i class="fa fa-pinterest"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-rss"><i class="fa fa-rss"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-tumblr"><i class="fa fa-tumblr"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-linkedin"><i class="fa fa-linkedin"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-dribbble"><i class="fa fa-dribbble"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-youtube"><i class="fa fa-youtube"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-github"><i class="fa fa-github"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-skype"><i class="fa fa-skype"></i></a> 
          <a href="javascript:;" class="btn-icon btn-icon-sm btn-vimeo"><i class="fa fa-vimeo-square"></i></a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Directional Button </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body text-center">
          <p> 
            <a href="javascript:;" class="btn btn-primary btn-direction btn-left">Left</a> 
            <a href="javascript:;" class="btn btn-primary btn-direction">Middle</a> 
            <a href="javascript:;" class="btn btn-primary btn-direction btn-right">RIght</a> 
          </p>
          <p> 
            <a href="javascript:;" class="btn btn-success btn-direction btn-left">Left</a> 
            <a href="javascript:;" class="btn btn-info btn-direction">Middle</a> 
            <a href="javascript:;" class="btn btn-danger btn-direction btn-right">RIght</a> 
          </p>
          <p> 
            <a href="javascript:;" class="btn btn-warning btn-direction btn-left">Left</a> 
            <a href="javascript:;" class="btn btn-success btn-direction">Middle</a> 
            <a href="javascript:;" class="btn btn-info btn-direction btn-right">RIght</a> 
         </p>
          <p> 
            <a href="javascript:;" class="btn btn-info btn-direction btn-left">Left</a> 
            <a href="javascript:;" class="btn btn-danger btn-direction">Middle</a> 
            <a href="javascript:;" class="btn btn-success btn-direction btn-right">RIght</a> 
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Justified Button Group </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <button type="button" class="btn btn-default btn-block">Default</button>
          <button type="button" class="btn btn-primary btn-block">Primary</button>
          <button type="button" class="btn btn-success btn-block">Success</button>
          <button type="button" class="btn btn-info btn-block">Info</button>
          <button type="button" class="btn btn-warning btn-block">Warning</button>
          <button type="button" class="btn btn-danger btn-block">Danger</button>
          <button type="button" class="btn btn-inverse btn-block">Inverse</button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Justified Button Link </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <h4> With <code>&lt;a&gt;</code> elements </h4>
          <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
          <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-success"> Left </a> <a href="#" class="btn btn-info"> Middle </a> <a href="#" class="btn btn-danger"> Right </a> </div>
          <br>
          <br>
          <div class="btn-group btn-group-justified"> <a class="btn btn-success" role="button"> Left </a> <a class="btn btn-info" role="button"> Middle </a>
            <div class="btn-group" dropdown is-open="status.isopen32">
              <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> Right <span class="caret"></span> </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:;">Action</a></li>
                <li><a href="javascript:;">Another action</a></li>
                <li><a href="javascript:;">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="javascript:;">Separated link</a></li>
              </ul>
            </div>
          </div>
          <h4>With <code> &lt;button&gt; </code> elements</h4>
          <p>To use justified button groups with <code> &lt;button&gt; </code> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <code> &lt;button&gt; </code> elements, but since we support button dropdowns, we can workaround that.</p>
          <div class="btn-group btn-group-justified">
            <div class="btn-group">
              <button type="button" class="btn btn-success">Left</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-info">Middle</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-danger">Right</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
